<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--以上3个meta放在最前面 其他都必须放在他们后面-->
    <title>7.13胶囊标签页</title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav nav-pills">
    <li  class="active">
        <a href="#home"  data-toggle="pill">Home</a>
    </li>
    <li >
        <a href="#profile"  data-toggle="pill">Profile</a>
    </li>
    <li >
        <a href="#message"  data-toggle="pill">Message</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">我是第一页</div>
    <div class="tab-pane" id="profile">我是第二页</div>
    <div class="tab-pane" id="message">我是第三页</div>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>